<template>
    <view class="commonSymptom">
        <Navigation title="常见症状分类" background="#fff" />
        <view class="search ph-32 pv-12 h-88">
            <view class="w-686 h-64 search-box">
                <u-search
                    placeholder="请输入您想要搜索的内容"
                    v-model="keyword"
                    bgColor="#F5F5F5"
                    height="32"
                    searchIconColor="#CCCCCC"
                    placeholderColor="#CCCCCC"
                    :clearabled="false"
										@custom="toSerach()"
                ></u-search>
            </view>
        </view>
        <scroll-view scroll-y="true" class="list">
            <view class="f list-content">
                <view class="w-150 box">
                    <view
                        v-for="(item, index) in typeList"
                        :key="index"
                        class="w-150 h-96 f ai-c jc-c fs-24 text-color4"
                        :class="typeCurt == index ? 'active' : ''"
												@click="loadData(item.categoryCode,index)"
                    >
                        {{ item.categoryName }}
                    </view>
                </view>
                <view class="list-box ph-32 f f1 pt-32">
                    <scroll-view scroll-y="true">
                        <view class="mb-24 c b-88 f jc-s-b text ph-32 pv-24" v-for="(item, index) in list" :key="index" @click="toFirstVisit(item)">
                            <view class="fs-28 text-color4 u-line-1">{{item.diagnosisResult}}</view>
                            <u-icon name="arrow-right" size="16" color="#999999"></u-icon>
                        </view>
                    </scroll-view>
                </view>
            </view>
        </scroll-view>
    </view>
</template>
//
// import { ref } from 'vue';
// import { onLoad } from '@dcloudio/uni-app';

// const typeList = [
//     { name: '消化道' },
//     { name: '呼吸道' },
//     { name: '泌尿道' },
//     { name: '皮肤' },
//     { name: '生殖系统' },
//     { name: '五官' },
//     { name: '四肢骨骼' },
//     { name: '其他综合' },
// ];
// const typeCurt = ref(0);
// const toFirstVisit = () => {
//     uni.navigateTo({
//         url: '/pages_index/firstVisit',
//     });
// };
// 
<script>
	import { diseasePage,categoryList } from '@/services/api/index/index';
	
	export default {
		data() {
			return {
				typeList:[],
				list:[],
				typeCurt:0,
				keyword:'',
				code:'',
				petId:''
			}
		},
		onLoad(opt){
			this.petId=opt.petId
		},
		onShow() {
			this.loadCate()
		},
		methods: {
			toSerach(){
				this.loadData(this.code,this.typeCurt)
			},
			toFirstVisit(item){
				uni.setStorageSync('disease',item)
			    uni.navigateTo({
			        url: '/pages_index/firstVisit?petId='+this.petId,
			    });
			},
			async loadCate(){
				const res=await categoryList({scope:2,types:''})
				this.typeList=res.data
				if(this.typeList.length>0){
					this.loadData(this.typeList[0].categoryCode,0)
				}
				
			},
			async loadData(id,index){
				this.typeCurt=index
				this.code=id
				let data={
					firstCategoryCode:id
				}
				if(this.keyword){
					data.keyword=this.keyword
				}
				const res=await diseasePage(data)
				this.list=res.data.list
			}
		}
	}
</script>

<style lang="scss" scoped>
.commonSymptom {
    .list {
        height: calc(100vh - 88rpx);
        .box {
            background: #f5f5f5;
            height: 100%;
        }
        .list-content {
            height: 100%;
        }
        .list-box {
            height: 100%;
            .text {
                border: 2rpx solid #f0f0f0;
            }
        }
        .active {
            background: #fff;
            color: #fabb3c;
            position: relative;
        }
        .active::after {
            position: absolute;
            background: #fabb3c;
            height: 40rpx;
            width: 6rpx;
            top: 50%;
            margin-top: -20rpx;
            left: 0;
            content: '';
        }
    }
    .search {
        background: #fff;
        .search-box {
            position: relative;
						display: flex;
						align-items: center;
            .text {
                position: absolute;
                right: 0rpx;
                top: 11rpx;
                z-index: 1;
                text-align: center;
            }
            .text::after {
                content: '';
                position: absolute;
                left: 0rpx;
                top: 7rpx;
                width: 1px;
                height: 32rpx;
                background: #dddddd;
            }
        }
    }
    ::v-deep .u-search__content {
        border-radius: 8rpx !important;
    }
}
</style>
